<template>
  <div>
    <div>
      <h4>商品清单如下:</h4>
      <p
        v-for="(obj,index) in list"
        :key='index'
      >{{obj.shopName}}--{{obj.price}}/份</p>
    </div>
    <!-- 购买的个数 -->
    <div>
      <h4>请选择购买的数量:</h4>
      <!-- 组件 -->
      <Food
        v-for="(obj,index) in list"
        :key="index"
        :goodsName='obj.shopName'
        :count='obj.count'
        :index='index'
        @add='addFn'
        @reduce='reduceFn'
      ></Food>
      <p>总价为:{{allNumber}}</p>
    </div>
  </div>
</template>

<script>
import Food from './components/Food'
export default {
  data () {
    return {
      list: [
        {
          "shopName": "可比克薯片",
          "price": 5.5,
          "count": 0
        },
        {
          "shopName": "草莓酱",
          "price": 3.5,
          "count": 0
        },
        {
          "shopName": "红烧肉",
          "price": 55,
          "count": 0
        },
        {
          "shopName": "方便面",
          "price": 12,
          "count": 0
        }
      ]
    }
  },
  components: {
    Food
  },
  methods: {
    addFn (ind) {
      this.list[ind].count++
    },
    reduceFn (ind) {
      this.list[ind].count > 0 && this.list[ind].count--
    }
  },
  computed: {
    allNumber () {
      return this.list.reduce((sum, obj) => sum += obj.count * obj.price, 0)
    }
  }
}
</script>

<style>
</style>